﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/CustomerAdmin/Customer.Master" CodeBehind="DetailsAuto.aspx.cs" Inherits="OnlineBusinesses.Areas.CustomerAdmin.Charts.DetailsAuto" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ContentCustomerAdmin">
    <script type="text/javascript">
        $(document).ready(function () {
            var source1 =
            [
                { Browser: 'Gửi thành công', Share: 600 },
                { Browser: 'Email lỗi', Share: 200 },
                { Browser: 'Từ chối nhận tin', Share: 145 }
            ];
            var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading '); } });
            // prepare jqxChart settings
            var source2 =
            [
                { Browser: 'Email đã mở', Share: 400 },
                { Browser: 'Email chưa mở', Share: 200 }
            ];
            var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading '); } });

            // prepare jqxChart settings
            var settings = {
                title: "Báo cáo gửi Email",
                description: "( Tổng mail gửi : 945 thư)",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: false,
                //legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },

                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'donut',
                            offsetX: 'auto',
                            source: dataAdapter1,

                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 10,
                                        radius: 130,
                                        innerRadius: 90,
                                        centerOffset: 0
                                    }
                                ]
                        },
                        {
                            type: 'donut',
                            offsetX: 'auto',
                            source: dataAdapter2,
                            colorScheme: 'scheme02',

                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 10,
                                        radius: 70,
                                        innerRadius: 30,
                                        centerOffset: 0
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>

    <div class="col-md-12 col-xs-12" id='chartContainer' style="text-align:center;height: 450px;padding:10px;">
	</div>
</asp:Content>